/* banner */
.banner{height: 800px;position: relative;}
.h-banner2{height: 800px;position: relative;}
.m-banner2{position: relative;display: none;}
/* num-change */
.num-change{width: 100%;max-width: 1250px;font-size: 24px;position: absolute;bottom: -50px;left: 0;z-index: 1;background-color: #fff;box-shadow:  0px 22px 44px 0px #0F000000}
.num-change ul li{padding: 0;}
.num-change .shuzi{padding: 0 5% 0 10%;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 5% 0 2%;}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 10% 0;text-align: center;}
.num-change .shuzi p:last-child img{margin: 0 6%;max-width: 50%;}

.num-change .counter,.num-change b{font-size: 46px;color: #18A3C8;}
@media screen and (min-width: 0px) and (max-width:768px){
    .num-change .shuzi p:last-child span{display: block;margin-top: 5%;}
}


/* about */
.about{background-color: #f5f5f5;position: relative;background-size: auto;background-position: 0 bottom;background-repeat: no-repeat;}
.about .a-l{margin: 3% 0;}
.about .a-l .fr{max-width: 800px;padding-right: 5%;}
.about .a-l .fr .a-con{margin: 5% 0;line-height: 30px;font-size: 16px;color: #222;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.about .a-l .fr a{margin-top: 10px;display: block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #222;border-radius: 50%;font-size: 18px;color: #222;font-family: cursive;font-weight: bold;position: relative;transition: all 0.3s;overflow: hidden;z-index: 1;}
.about .a-r{padding: 0 0;}
.about .a-r img{max-width: 100%;height: 450px;filter: brightness(1.1);object-fit: cover;}
.about .a-l .fr a::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #18A3C8;transition: all 0.3s;z-index: -1;border-radius: 50%;}
.about .a-l .fr a:hover{color: #fff;border: 1px solid #18A3C8;}
.about .a-l .fr a:hover::after{width: 110%;height: 110%;}

/* Pro */
.product{margin: 0 auto;position: relative;padding: 2% 0 4%!important;background-size: auto 100%;background-position: 0 bottom;}
.product .n-area{overflow: unset;max-width:1620px}
.product .tit{position: relative;margin-bottom: 1%;}
.product h2{display: inline-block;padding: 0 15px;}
.product .pro-cate{position: absolute;right: 0;top: 50%;width: calc(100% - 310px);transform: translateY(-50%);}
.product .pro-cate li{float: left;margin: 2px 15px 2px 0;position: relative;z-index: 1;transition: all 0.3s;overflow: hidden;width: calc(16.666666% - 15px);max-width: 130px;}
.product .pro-cate li a{display: block;border: 1px solid #ccc;color: #222;font-size: 16px;line-height: 58px;position: relative;z-index: 3;transition: all 0.3s;width: 100%;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0 5%;float: left;}
.product .pro-cate li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #18A3C8;width: 0;height: 0;transition: all 0.3s;}
.product .pro-cate li::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #18A3C8;width: 0;height: 0;transition: all 0.3s;}
.product .proli{display: inline-block;width: 100%;}
.product .proli a{display: inline-block;width: 100%;margin-bottom: 10%;padding: 1px;background-color: #dbdbdb;position: relative;z-index: 1;transition: all 0.3s;}
.product .proli a::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #18A3C8;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #18A3C8;width: 0;height: 0;transition: all 0.3s;}
.product .proli a .pro-img{overflow: hidden;position: relative;padding-top: 100%;z-index: 3;background-color: #fff;}
.product .proli a .pro-img img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;filter: brightness(1.1);}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: #222;font-size: 16px;padding: 6% 5%;background-color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-right: calc(35px);}
.product .proli a .pro-tit span{width: 32px;height: 32px;text-align: center;line-height: 32px;color: #ccc;border: 1px solid #ccc;position: absolute;right: 5%;top: 50%;transform: translateY(-50%);font-size: 30px;background-color: #fff;}
.product .more{float: right;display: block;font-size: 16px;color: #999;margin-right: 15px;}
.product .more span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: bold;position: relative;z-index: 1;}

.product .more span::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #18A3C8;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product .more:hover span{color: #fff;border: 1px solid #18A3C8;}
.product .more:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}
.product .proli a:hover{box-shadow: 0 0 5px;}
.product .proli a:hover .pro-tit p{background-color:rgba(0, 0, 0, 0);color: #fff;}
.product .proli a:hover::after,.product .proli a:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover::after,.product .pro-cate li:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover a{color: #fff;}

/* app */
.app {padding-top: 4%!important;background-size: 1920px auto;background-position: 0 top;}
.app h2{text-align: center;margin: 0% 0 3%;transition: all 0.3s;}
.app ul li{padding-top: 35%;position: relative;background-size: cover;transition: all 0.3s;z-index: 1;cursor: pointer;overflow: hidden;}
.app ul li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #18A3C8;width: 0;height: 100%;transition: all 0.3s;z-index: 2;}
.app ul li .app-info{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-40%);text-align: center;width: 80%;transition: all 0.3s;z-index: 3;}
.app ul li .app-info p:first-child{font-size: 20px;color: #fff;margin-bottom: 20%;transition: all 0.3s;}
.app ul li .app-info img{max-width: 50%;transition: all 0.3s;}
.app ul li .app-info p:last-child{font-size: 17px;color: #fff;margin-top: 20%;transition: all 0.3s;opacity: 0;cursor: pointer;transform: translateY(100px);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}


.app ul li:hover::after{left: 0;width: 100%;right: auto;}
.app ul li:hover .app-info{transform: translate(-50%,calc(-50%));}
.app ul li:hover .app-info p:last-child{opacity: 1;transform: translateY(0);}

/* adv */
.adv{background-size: 100%;background-position: center bottom;background-repeat: no-repeat;}
.adv h2{text-align: center;margin: 6% 0 3%;}
.adv ul li{padding-top: 22%;position: relative;background-size: cover;cursor: pointer;z-index: 1;overflow: hidden;}
.adv ul li::after{position: absolute;z-index: 2;content: '';left: 0;bottom: -100%;width: 100%;height: 100%;transition: all 0.3s;z-index: 2;background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));}
.adv ul li .adv-info{position: absolute;left: 50%;transform: translateX(-50%);text-align: left;width: 100%;padding: 0 10%;bottom: 0px;overflow: hidden;z-index: 3;}
.adv ul li .adv-info p:first-child{font-size: 24px;color: #fff;}
.adv ul li .adv-info p:last-child{font-size: 16px;color: #fff;margin-top: 10%;height: 0;line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;transition: all 0.3s;}
.adv .n-area{padding-bottom: 12%;}

.adv ul li:hover::after{bottom: 0;}
.adv ul li:hover .adv-info p:last-child{height: 90px;}




/* news */
.news{background-color: #f2f2f2;}
.news h2{position: relative;margin: 5.5% 0 3%;}
.news h2 a{float: right;display: block;font-size: 16px;color: #999;right: 1%;position: absolute;top: 50%;transform: translateY(-50%);}
.news h2 a span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: bold;position: relative;}
.news ul li{margin-bottom: 40px;}
.news ul li .li-d{float: left;position: relative;z-index: 1;transition: all 0.3s;width: 100%;}
.news ul li a{display: block;float: left;color: #222;background-color: #fff;padding: 0 5%;position: relative;width: 100%;height: 230px;z-index: 3;}
.news ul li a h4{font-size: 16px;margin: 7% 0;transition: all 0.3s;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;font-size: 14px;opacity: 0.6;transition: all 0.3s;}
.news ul li a span{font-size: 14px;opacity: 0.6;margin: 7% 0;display: block;z-index: 1;}

.news ul li div::after{position: absolute;z-index: 2;content: '';width: 0;height: 0;background-color: #18A3C8;left: 0;top: 0;transition: all 0.3s;}
.news ul li div::before{position: absolute;z-index: 2;content: '';width: 0;height: 0;background-color: #18A3C8;right: 0;bottom: 0;transition: all 0.3s;}

.news ul li:first-child a{background-size: cover;background-repeat: no-repeat;padding-top: 230px;}
.news ul li:first-child a div{position: absolute;bottom: 0;color: #fff;left: 0;padding: 0% 5%;width: 100%;height: 100%;}
.news ul li:first-child a p,.news ul li:first-child a span{opacity: 1;}

.news h2 a span::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #18A3C8;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.news ul li:first-child:hover a h4{color: #fff;}
.news ul li:hover a h4{color: #18A3C8;}
.news h2 a:hover span{color: #fff;border: 1px solid #18A3C8;}
.news h2 a:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}

.news ul li .li-d:hover a{height: 226px;margin: 2px;width: calc(100% - 4px);}
.news ul li .li-d:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
.news ul li .li-d:hover::before{right: auto;left: 0;width: 100%;height: 100%;}
.news ul li:first-child a div::after,.news ul li:first-child a div::before{background-color:rgba(24,163,200,0);background-image: linear-gradient(to top, rgba(24,163,200,1), rgba(24,163,200,0));z-index: -1;}
.news ul li:first-child:hover a div::after{right: 0;left: auto;width: 100%;height: 100%;}
.news ul li:first-child:hover a div::before{right: auto;left: 0;width: 100%;height: 100%;}

@media screen and (min-width: 0px) and (max-width:1250px){
    .h-banner2{height: 600px;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .num-change{position: relative;bottom: 0;float: left;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .app ul li{padding-top: 45%;}
    .news ul li a p{-webkit-line-clamp:3}
    .product .tit{margin-bottom: 2%;}
}
@media screen and (min-width: 0px) and (max-width:1100px){
    .h-banner2{height: 500px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .num-change .counter, .num-change b{font-size: 32px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .num-change{position: relative;bottom: 0;float: left;}
    .about .a-l{margin-top: 5%;padding-right: 0;}
    .about .a-l .fr .a-con{margin-top: 0;font-size: 14px;}
    .about .a-r img{height: auto;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;width: 100%;}
    .product .pro-cate li{float: left;margin: 0 2% 1%;width: 29%;}
    .product .pro-cate li a{font-size: 14px;}
    .product .proli li:nth-child(7),.product .proli li:nth-child(8){display: none;}
    .app ul li{padding-top: 55%;}
    .adv ul li{padding-top: 32%;}
    .app ul li .app-info p:first-child{font-size: 16px;}
    .app ul li .app-info p:last-child{font-size: 14px;}
    .adv ul li .adv-info p:first-child{font-size: 20px;}
    .adv ul li .adv-info p:last-child{font-size: 14px;}
    .product .pro-cate li a{line-height: 48px;}
    .product .more,.news h2 a{font-size: 14px;}
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 49px;height: 49px;line-height: 49px;}
    .product .pro-cate{padding: 0 15px;}
}
@media screen and (min-width: 0px) and (max-width:900px){
    .h-banner2{height: 400px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .product .proli li:nth-child(2n-1){padding-right: 5px;}
    .product .proli li:nth-child(2n){padding-left: 5px;}
    /* .news ul li:first-child a{padding-top: 350px;} */
    .app ul li{padding-top: 80%;}
    .news ul li a{height: auto;transition: all 0.3s;}
    .news ul li{margin-bottom: 20px;}
    .news ul li .li-d:hover::after,.news ul li .li-d:hover::before{display: none;}
    .news ul li .li-d:hover a{height: auto!important;width: calc(100%)!important;margin: 0;}
    .news ul li:first-child a div:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
    .news ul li:first-child a div:hover::before{right: auto;left: 0;width: 100%;height: 100%;}
}
@media screen and (min-width: 0px) and (max-width:750px){
    .h-banner2{display: none;}
    .m-banner2{display: block;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .adv ul li{padding-top: 62%;}
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 39px;height: 39px;line-height: 39px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .app ul li{padding-top: 120%;}
    .banner{height: 667px;}
    .product .more,.news h2 a{font-size: 12px;}
    .num-change .shuzi p:last-child{font-size: 12px;}
    .product .proli a .pro-tit p{font-size: 12px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
    .banner{height: 568px;}
}

.txt-swiper .swiper-slide p img{opacity: 0;transform: translateY(-30%);}
.txt-swiper .swiper-slide p img:first-child{animation: fade 2s ease 1 forwards;}
.txt-swiper .swiper-slide p img:last-child{animation: fade 2s ease 1.5s 1 forwards;}
@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}